<div class="row">
    <div class="col-6 small" ng-if="!$ctrl.canDrag">
        <em class="text-info"
            ng-bind="$ctrl.translate('warning_can_not_drag_drop',true, 'Note: Drag Drop only allow when order by priority asc!')"></em>
    </div>
    <div class="col-6 text-right small">
        <em> Total records: <span ng-bind="$ctrl.data.totalItems" class="text-muted"></span></em>
    </div>
</div>

<div class="data-table" ng-if="$ctrl.data.items" ng-init="$ctrl.init()">
    <div class="nav">
        <div class="col-sm-12">
            <div class="row card-header small px-0 py-1">
                <div class="col-1">
                    <!-- <small class="fa fa-grip-vertical text-black-50 align-middle"></small> -->
                </div>
                <div scope="col" class="col-sm-2" ng-repeat="col in $ctrl.columns track by $index">
                    <strong ng-bind="col.title">
                    </strong>
                </div>
                <div scope="col" class="col-sm-2">
                    <strong>Created Date</strong>
                </div>
                <div scope="col" class="col-sm-2">
                </div>
            </div>
        </div>
    </div>
    <div dnd-list="$ctrl.data.items" id="list-page" class="nav" ng-if="$ctrl.data.items.length"
        dnd-inserted="$ctrl.insertCallback(index, item, external, type)" dnd-disable-if="!$ctrl.canDrag">
        <div class="col-sm-12 dndPlaceholder"></div>
        <div ng-repeat="nav in $ctrl.data.items" class="col-sm-12 dnd-item border-left-0 border-right-0 rounded-0"
            dnd-draggable="nav" dnd-moved="$ctrl.updateOrders($index,$ctrl.data.items)" dnd-effect-allowed="move"
            dnd-selected="$ctrl.selected = nav" ng-class="{'selected': $ctrl.selected === nav}">
            <div class="row">
                <div class="col-1 drag-header" style="cursor:grab;">
                    <small class="fa fa-grip-vertical text-black-50 align-middle"></small>
                </div>
                <div class="col-2 small" ng-repeat="col in $ctrl.columns track by $index" style="overflow:hidden">
                    <module-data-preview data="nav.jItem[col.name]" width="50" class="mb-0"></module-data-preview>
                </div>
                <div class="col-2">
                    <small>
                        {{nav.createdDateTime | utcToLocal}}
                    </small>
                </div>
                <div class="col">
                    <div class="btn-group btn-group-sm float-right" role="group" aria-label="Actions">
                        <a class="btn btn-link text-primary" ng-click="$ctrl.view(nav.moduleId,nav.id)">
                            <span class="fa fa-eye"></span></a>
                        <a ng-if="nav.childNavs.length > 0" class="btn btn-link text-primary"
                            ng-click="$ctrl.toggleChildNavs(nav)">
                            <span class="fa fa-list"></span>
                        </a>
                        <a ng-if="$ctrl.editUrl" ng-click="$ctrl.goTo(nav.id)" class="btn btn-link text-primary">
                            <span class="fas fa-pen"></span>
                        </a>
                        <a ng-click="$ctrl.delete(nav.id);" class="btn btn-link del-popover text-danger"
                            data-toggle="popover" data-html="true">
                            <span class="fas fa-trash-alt"></span>
                        </a>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>